<div class="c-sw-rule">
    <div class="c-sw-rule__ui l-compact-form l-widget-rule s-widget-rule has-local-controls">
        <div class="c-sw-rule__ui__header widget-rule-header">
            <div class="c-sw-rule__grippy-wrapper">
                <div class="c-sw-rule__grippy t-grippy local-control local-controls-hidden"></div>
            </div>
            <div class="c-disclosure-triangle c-disclosure-triangle--expanded is-enabled js-disclosure"></div>
            <div class="t-widget-thumb widget-thumb c-sw c-sw--thumb">
                <div class="c-sw__icon js-sw__icon"></div>
                <div class="c-sw__label js-sw__label"></div>
            </div>
            <div class="flex-elem rule-title">Default Title</div>
            <div class="flex-elem rule-description grows">Rule description goes here</div>
            <div class="flex-elem c-local-controls--show-on-hover l-rule-action-buttons-wrapper">
                <a class="s-icon-button icon-duplicate t-duplicate" title="Duplicate this rule"></a>
                <a class="s-icon-button icon-trash t-delete" title="Delete this rule"></a>
            </div>
        </div>
        <div class="widget-rule-content expanded">
            <ul>
                <li>
                    <label>Rule Name:</label>
                    <span class="controls">
                        <input class="t-rule-name-input" type="text" />
                    </span>
                </li>
                <li class="connects-to-previous">
                    <label>Label:</label>
                    <span class="controls t-label-input">
                        <input class="t-rule-label-input" type="text" />
                    </span>
                </li>
                <li class="connects-to-previous">
                    <label>Message:</label>
                    <span class="controls">
                        <input type="text" class="lg s t-rule-message-input"
                         placeholder="Will appear as tooltip when hovering on the widget"/>
                    </span>
                </li>
                <li class="connects-to-previous">
                    <label>Style:</label>
                    <span class="controls t-style-input"></span>
                </li>
            </ul>
            <ul class="t-widget-rule-config">
                <li>
                    <label>Trigger when</label>
                    <span class="controls">
                        <select class="t-trigger">
                            <option value="any">any condition is met</option>
                            <option value="all">all conditions are met</option>
                        </select>
                    </span>
                </li>
                <li>
                    <label></label>
                    <span class="controls">
                        <button class="c-button add-condition icon-plus">
                            <span class="c-button__label">Add Condition</span>
                        </button>
                    </span>
                </li>
            </ul>
        </div>
    </div>
    <div class="t-drag-indicator l-widget-rule s-widget-rule" style="opacity:0;" hidden></div>
</div>
